<template>
  <div class="userComment box-border pb-200rpx">
    <div class="sticky left-0 right-0 top-0 z-9 h-full bg-hex-ffffff pb-32rpx">
      <div class="relative">
        <div class="z-999 flex items-center px-20rpx" :style="{ paddingTop: `${searchBarTop}px` }" @click.stop="goback">
          <uni-icons type="back" size="28" />
          <text class="text-36rpx font-600">评论</text>
        </div>
      </div>
    </div>
    <div v-if="commentList.length>0">
      <div
        v-for="item in commentList"
        class="box-border border-2rpx border-transparent border-b-hex-F5F5F5 border-solid p-34rpx">
        <div class="mb-32rpx flex items-center justify-between">
          <div class="flex items-center">
            <image
              :src="item.avatarUrl"
              mode="scaleToFill"
              class="mr-12rpx h-64rpx w-64rpx"
            />
            <text class="mr-22rpx text-28rpx text-hex-2626262">{{ item.nickname }}</text>
            <image
              v-if="item.level===0"
              :src="`${cdnUrl}/imgs/userComment/greatComment.png${imgVersion}`"
              mode="scaleToFill"
              class="mr-8rpx h-32rpx w-32rpx"
            />
            <image
              v-if="item.level===1"
              :src="`${cdnUrl}/imgs/userComment/centerComment.png${imgVersion}`"
              mode="scaleToFill"
              class="mr-8rpx h-32rpx w-32rpx"
            />
            <image
              v-if="item.level===2"
              :src="`${cdnUrl}/imgs/userComment/badComment.png${imgVersion}`"
              mode="scaleToFill"
              class="mr-8rpx h-32rpx w-32rpx"
            />
            <text v-if="item.level===0" class="text-24rpx text-hex-D4392F">好评</text>
            <text v-if="item.level===1" class="text-24rpx text-hex-D4392F">一般</text>
            <text v-if="item.level===2" class="text-24rpx text-hex-D4392F">差评</text>
          </div>
          <div class="text-24rpx text-hex-999999">{{ item.attributeDesc }}</div>
        </div>
        <div class="mb-32rpx text-28rpx text-hex-262626">{{ item.content }}</div>
        <div class="flex flex-wrap justify-between">
          <image
            v-for="imgUrl in item.imagesUrl"
            :src="imgUrl"
            mode="widthFix"
            class="mb-32rpx h-270rpx w-48% rounded-12rpx"
          />
        </div>
        <div class="flex justify-between">
          <div class="text-24rpx text-hex-999999">{{ formatTime(item.createdAt) }}</div>
          <!-- <div class="border-1rpx border-hex-E499C2 rounded-8rpx border-solid bg-hex-FEF6FF px-10rpx py-2rpx text-20rpx text-hex-E499C2">审核中</div> -->
        </div>
      </div>
    </div>
    <div v-if="commentList.length===0">
      <div class="mt-230rpx flex flex-col items-center">
        <div class="image">
          <image
            :src="`${cdnUrl}/imgs/noOpen/noText.png${imgVersion}`"
            mode="scaleToFill"
            class="h-364rpx w-364rpx"
          />
        </div>
        <div class="mb-64rpx text-28rpx text-hex-7C8699">暂无评论</div>
      </div>
    </div>
    <!-- <div class="fixed bottom-0 left-32rpx right-32rpx bg-hex-fff">
      <div class="mb-58rpx flex items-center justify-around">
        <div class="flex flex-col items-center">
          <div>
            <image
              :src="`${cdnUrl}/imgs/userComment/goodsCar.png${imgVersion}`"
              mode="scaleToFill"
              class="h-60rpx w-60rpx"
            />
          </div>
          <div class="text-24rpx text-hex-ADADAD">购物车</div>
        </div>
        <div class="flex flex-col items-center">
          <div>
            <div
              v-if="!isCollect"
              @click="handelCollect">
              <image
                :src="`${cdnUrl}/svgicons/teaDetails/collect_false.svg${imgVersion}`"
                mode="scaleToFill"
                class="h-40rpx w-40rpx"
              />
            </div>
            <div
              v-if="isCollect"
              @click="handelCancelCollect">
              <image
                :src="`${cdnUrl}/svgicons/teaDetails/collect_true.svg${imgVersion}`"
                mode="scaleToFill"
                class="h-40rpx w-40rpx"
              />
            </div>
          </div>
          <div class="text-24rpx text-hex-ADADAD">收藏</div>
        </div>
        <div class="h-72rpx w-198rpx border-2rpx border-hex-ABCD03 rounded-46rpx border-solid text-center text-28rpx leading-72rpx text-hex-ABCD03">立即购买</div>
        <div class="h-72rpx w-198rpx rounded-46rpx bg-hex-ABCD03 text-center text-28rpx leading-72rpx text-hex-ffffff">加入购物车</div>
      </div>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/stores/user'

let searchBarTop: any = $ref('24')
let productId: any = $ref('')
const userStores = useUserStore()
onLoad((options) => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  // #endif
  if (options) {
    productId = options?.productId
  }
})
const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}
const goTeaIndex = () => {
  uni.reLaunch({
    url: '/pages/index',
  })
}
const formatTime = (time) => {
  if (time) {
    return time.replace('T', ' ')
  }
}

let commentList: any = $ref([])
let pageNo: any = $ref(1)
let isGetMore: any = $ref(false)
const getCommentList = async () => {
  const reqData = {
    method: 'post',
    data: {
      'pageNo': pageNo,
      'pageSize': 10,
      'productId': productId,
    },
    headers: {
      AppType: 3,
      UserId: userStores.user.id,
    },
  }
  const { data, status, error } = await Fetch('/qqyapi/product/product/evaluation/listByProduct', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  if (data.code === 0) {
    commentList = commentList.concat(data?.result?.list)
    commentList.forEach((item) => {
      item.imagesUrl = item.imagesUrl.split(',')
    })
    if (commentList.length < data?.result?.total) {
      isGetMore = true
    }
    isGetMore = false

  }
}
let isCollect: any = $ref(false)
// 查询用户是否收藏该商品
const getIsCollect = async () => {
  const reqData = {
    method: 'post',
    data: {
      'productId': productId,
    },
    headers: {
      AppType: 3,
      UserId: userStores.user.id,
    },
  }
  const { data, status, error } = await Fetch('/qqyapi/product/product/collect/isCollect', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  isCollect = data.result
}
// 取消收藏该商品
const handelCancelCollect = async () => {
  const reqData = {
    method: 'post',
    data: {
      'productId': productId,
    },
    headers: {
      AppType: 3,
      UserId: userStores.user.id,
    },
  }
  const { data, status, error } = await Fetch('/qqyapi/product/product/collect/delete', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  getIsCollect()
}
// 收藏该商品
const handelCollect = async () => {
  const reqData = {
    method: 'post',
    data: {
      'productId': productId,
    },
    headers: {
      AppType: 3,
      UserId: userStores.user.id,
    },
  }
  const { data, status, error } = await Fetch('/qqyapi/product/product/collect/add', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  getIsCollect()
}
onMounted(() => {
  getCommentList()
  getIsCollect()
})
onReachBottom(() => {
  if (isGetMore) {
    pageNo++
    getCommentList()
  }
})
</script>

<style lang="scss" scoped>
</style>
